<template>
  <div class="assess">
    <table>
      <tr>
        <th></th>
        <th v-for="item in equipments" :key="item.nodeId">{{ item.label }}</th>
      </tr>
      <tr>
        <td class="table-title">A</td>
        <td v-for="(ass, i) in assessment" :key="i">
          <evaluate-table-cell
            :col="i"
            :disable="i == 0"
            :changeValue="changeValue"
            :content="assessment[i]"
          ></evaluate-table-cell>
        </td>
      </tr>
    </table>
    <span class="tips"
      >第一位已经给出为0.5，后续位如果更重要就填写大于0.5的数值，更不重要填写小于0.5的数值。</span
    >
  </div>
</template>

<script>
/**
 * TODO:这里改成一行，但是一行的话就谁在左边谁在右边呢？
 * 当点击确认，要让这个组件知道，然后组件要开始检查是不是完成了，
 * 如果完成了，那么就可以发送请求
 * 如果没有，就算了
 */
import EvaluateTableCell from "./EvaluateTableCell.vue";
export default {
  components: { EvaluateTableCell },
  name: "EvaluateTable",
  props: ["fid", "trainingId", "setScores"],
  data() {
    return {
      equipments: [
        {
          nodeId: "0d413fb7abef41ba956484f276c0555f",
          label: "A",
        },
        {
          nodeId: "dac8060f4fa14192af0d6d2a4b2944c0",
          label: "B",
        },
        {
          nodeId: "df41359d2c7c46bf8973207eacddb20d",
          label: "C",
        },
      ],
      assessment: [0.5, 0.6, 0.7],
    };
  },
  methods: {
    // 初始化assessment
    initAssessment() {
      /**
       * 逻辑：先生成一个对应的n*n的数组然后赋值，或者边生成边赋值
       */
      const evalArr = [];
      // const operPermitArr = [];
      const len = this.equipments.length;
      for (let i = 0; i < len; i++) {
        evalArr.push([]);
        // operPermitArr.push([]);
        for (let j = 0; j < len; j++) {
          let value = i == j ? 0.5 : 0;
          // let flag = i == j;
          evalArr[i].push(value);
          // operPermitArr[i].push(flag);
        }
      }
      this.assessment = evalArr;
    },
    // 将assessment处理成上三角的数组的形式
    /**
     * i: [0,n-2]
     * j: [1, n-1]
     * and i<j
     */
    processAssessment() {
      const len = this.assessment.length;
      const resArr = [];
      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (i >= 0 && i <= len - 2 && j >= 1 && j <= len - 1) {
            resArr.push(this.assessment[i][j]);
          }
        }
      }
      return resArr;
    },
    changeValue(i, value) {
      this.$set(this.assessment, i, value);
    },
    judge() {
      // 需要上三角都不是0
      const len = this.assessment.length;
      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (i >= 0 && i <= len - 2 && j >= 1 && j <= len - 1) {
            if (this.assessment[i][j] == 0) return false;
          }
        }
      }
      return true;
    },
  },
  mounted() {
    console.log("mounted");
    const { fid: nodeId, trainingId } = this;
    // 发请求
    this.$http
      .get(`${this.$reqPrefix}/trainingBuild/getChildren`, {
        params: {
          nodeId,
          trainingId,
        },
      })
      .then((res) => {
        if (res.data.state == 200) {
          this.equipments = res.data.data;
          this.initAssessment();
        }
      });
  },
  watch: {
    assessment: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.setScores(this.assessment);
      },
    },
  },
};
</script>

<style lang='less' scoped>
.table-title {
  font-weight: bold;
}
.ipt {
  width: 20px;
  border: 1px solid #cccccc;
  border-radius: 2px;
  outline: none;
}

table {
  text-align: center;
  margin: auto;
  border-spacing: 0;
  // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  tr {
    // border-bottom: 1px solid black;
    height: 42px;
    &:nth-child(2n + 1) {
      background-color: #fdf5e6;
    }
    &:nth-child(2n) {
      background-color: #fafafa;
    }
    td {
      width: 82px;
      height: 42px;
      padding: 0 10px;
    }
  }
}
</style>